<route lang="jsonc" type="page">
{
  "layout": "tabbar",
  "style": {
    "navigationStyle":"custom",
    "navigationBarTitleText": "我的",
    "navigationBarBackgroundColor": "#2563eb",
    "navigationBarTextStyle": "white"
  }
}
</route>

<script lang="ts" setup>
import { useUserStore } from '@/store/user'
import { safeAreaInsets } from '@/utils/system'

// 用户信息数据
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

/**
 * 处理退出登录操作
 */
function handleLogout() {
  uni.showModal({
    title: '退出登录',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 这里可以添加退出登录的逻辑，如清除token、用户信息等
        console.log('用户点击确定退出登录')
        // 退出登录后可以跳转到登录页
        uni.reLaunch({ url: '/pages/login/login' })
        userStore.logout()
      }
    },
  })
}
</script>

<template>
  <view class="min-h-screen bg-gray-100">
    <!-- 用户信息卡片 -->
    <view class="bg-blue-600 text-white" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
      <view class="flex items-center px-6 py-8">
        <!-- 头像 -->
        <view class="relative">
          <image
            class="h-20 w-20 border-2 border-white rounded-full shadow-lg"
            src="/static/images/default-avatar.png"
            mode="aspectFill"
          />
        </view>

        <!-- 用户信息 -->
        <view class="ml-4">
          <view class="flex items-center text-xl font-bold">
            {{ userInfo.username }}
            <text class="ml-2 rounded-full bg-blue-800 px-2 py-0.5 text-xs">
              {{ userInfo.role }}
            </text>
          </view>
          <view class="mt-1 text-blue-100">
            {{ userInfo.department }}
          </view>
        </view>
      </view>
    </view>

    <!-- 功能菜单区域 -->
    <view class="mt-4 bg-white">
      <!-- 个人设置 -->
      <view class="border-b border-gray-100">
        <view class="flex items-center justify-between p-4">
          <view class="flex items-center">
            <view class="mr-3 h-6 w-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600">
              <text class="text-sm">⚙️</text>
            </view>
            <text>个人设置</text>
          </view>
          <view class="text-gray-400">
            <uni-icons type="forward" />
          </view>
        </view>
      </view>

      <!-- 关于我们 -->
      <view class="border-b border-gray-100">
        <view class="flex items-center justify-between p-4">
          <view class="flex items-center">
            <view class="mr-3 h-6 w-6 flex items-center justify-center rounded-full bg-green-100 text-green-600">
              <text class="text-sm">ℹ️</text>
            </view>
            <text>关于我们</text>
          </view>
          <view class="text-gray-400">
            <uni-icons type="forward" />
          </view>
        </view>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="mt-8 px-6">
      <button
        class="w-full rounded-lg bg-blue-500 py-1 text-white font-medium"
        hover-class="bg-blue-600"
        @click="handleLogout"
      >
        退出登录
      </button>
    </view>

    <!-- 版本信息 -->
    <view class="mt-6 text-center text-xs text-gray-400">
      版本 1.0.0
    </view>
  </view>
</template>

<style lang="scss" scoped>
// 使用Unocss原子化类名，这里无需额外样式
</style>
